import React, { Component } from 'react';
import { connect } from 'react-redux'
import moment from 'moment'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;
import SecondTransferModal from '../../components/transfer/SecondTransferModal';

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class EditTransferModal extends Component {
  constructor(props) {
    super(props)
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  //点击迁移弹出迁移窗口
  onAddTransferItem = (id) => {
    const { onAddTransferItem } = this.props;
    onAddTransferItem(id);
  };


  //点击增加迁移详情
  onAddDetail = () => {
    const { onAddDetail } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onAddDetail();
      }
    });
  };

  //点击编辑弹出编辑窗口
  onEditTransfer = (id) => {
    const { onEditTransfer } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onEditTransfer(id);
      }
    });
  };


  render() {
    const { children, dispatch, assetType, assetList, id, editDetailList, item, roomList, assetBrandList, userList, addDetailHandler } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout1 = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };

    const getRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 150
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 150
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 120,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 150,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (value, row, index) => {
        return (
          value == 1 ? "已迁移" : value == 2 ? "未迁移" : ''
        )
    }
    },
    {
      title: '原管理部门',
      dataIndex: 'originalManageBranchName',
      key: 'originalManageBranchName',
      width: 120,
    },
    {
      title: '原领用部门',
      dataIndex: 'originalUseBranchName',
      key: 'originalUseBranchName',
      width: 120,
    },
    {
      title: '原领用人',
      dataIndex: 'originalEndUser',
      key: 'originalEndUser',
      width: 120,
    },
    {
      title: '原机房',
      dataIndex: 'originalRoomName',
      key: 'originalRoomName',
      width: 160,
    }, {
      title: '原机柜',
      dataIndex: 'originalRackName',
      key: 'originalRackName',
      width: 120,
    },
    {
      title: '原起始U位',
      dataIndex: 'originalStart',
      key: 'originalStartU',
      width: 100,
    }, {
      title: '原结束U位',
      dataIndex: 'originalEnd',
      key: 'originalEndU',
      width: 100,
    },
    {
      title: '目标管理部门',
      dataIndex: 'targetManageBranchName',
      key: 'targetManageBranchName',
      width: 120,
    },
    {
      title: '目标领用部门',
      dataIndex: 'targetUseBranchName',
      key: 'targetUseBranchName',
      width: 120,
    },
    {
      title: '目标领用人',
      dataIndex: 'targetEndUser',
      key: 'targetEndUser',
      width: 100,
    },
    {
      title: '目标机房',
      dataIndex: 'targetRoomName',
      key: 'targetRoomName',
      width: 160,
    }, {
      title: '目标机柜',
      dataIndex: 'targetRackName',
      key: 'targetRackName',
      width: 120,
    },
    {
      title: '目标起始U位',
      dataIndex: 'targetStart',
      key: 'targetStart',
      width: 100,
    }, {
      title: '目标结束U位',
      dataIndex: 'targetEnd',
      key: 'targetEnd',
      width: 100,
    }, {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 60,
      render: (text, record) => (
        <span>
          <a onClick={this.onEditTransfer.bind(null, record.id_)}>编辑</a>
        </span>
      ),
    }];

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          width={1000}
          zIndex={100}
          visible={this.props.visible}
          onOk={this.okHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{ }}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('transferDetailList', { initialValue: editDetailList })(
                      <Input type="hidden" />
                    )}
                  </FormItem>

                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem
                        label="迁移单号"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {
                          getFieldDecorator('id', {
                            initialValue: item.id_,
                          })(<Input readOnly="readOnly" style={{ width: '180px' }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        label="操作人"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {getFieldDecorator('operatorBy', {
                          initialValue: item.operatorBy_ + '',
                          rules: [{
                            required: true, whitespace: true, message: '请选择操作人',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 180 }}
                            placeholder="选择操作人"
                            optionFilterProp="children"
                          >
                            {getUser(userList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        label="预计执行时间"
                        hasFeedback
                        {...formItemLayout}
                      >

                        {getFieldDecorator('executeTime', {
                          initialValue: moment(item.executeTime, 'YYYY-MM-DD'),
                          rules: [{
                            required: true, type: 'object', whitespace: true, message: '请选择预计执行时间',
                          }]
                        })(
                          <DatePicker style={{ width: 190 }} />
                          )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '20px' }}>
                    <Col span={24}>
                      <FormItem
                        label="迁移备注"
                      >
                        {
                          getFieldDecorator('remark', {
                            initialValue: item.remark,
                            rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input style={{ width: '865px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>                 

                  <div style={{ }}>
                    <div style={{ width: '100%',  padding: "10px 20px 20px" }}>
                      <Table columns={columns}
                        rowKey={record => record.id_}
                        dataSource={editDetailList}
                        pagination={false}
                        scroll={{ x: 2600 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(EditTransferModal)
